<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖小程序</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: black;
            color: #ffffff;
        }

        #root {
            width: 600px;
            margin: 0 auto;
            margin-top: 10%;
            /* height: 300px; */
            border: 1px solid #ffffff;
            padding: 50px;
        }

        .marksBox2,
        .marksBox {
            background: rgba(0, 0, 0, 0.9);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            display: none;
        }

        .marksAction {
            display: block;
        }

        .marks {
            position: absolute;
            top: 30%;
            left: 50%;
            color: rgb(0, 172, 146);
            transform: translate(-50%, -50%);
            font-size: 28px;
        }

        .marks .contentText {
            color: #ffffff;
            font-size: 30px;
        }

        .exit {
            position: absolute;
            top: 20%;
            left: 50%;
            color: rgb(151, 42, 42);
        }

        .ok {
            position: absolute;
            top: 20%;
            left: 70%;
            color: rgb(0, 172, 146)
        }

        .task {
            display: flex;
            gap: 12px;
            margin-top: 16px;
        }

        .title {
            display: block;
            margin-bottom: 16px;
            font-size: 44px;
            text-shadow: #ffffff 5px 5px 10px;
        }

        .submitBtn {
            min-width: 64px;
            border-color: #ffffff;
            background-color: #ffffff;
            padding: 8px;
            height: 40px;
        }

        .btnC {
            box-shadow: #ffffff 2px 2px 10px;
            border-color: #ffffff;
            background-color: #ffffff;
            padding: 8px;
        }

        .item {
            border: 1px solid #ffffff;
            border-radius: 4px;
            margin-top: 12px;
            margin-bottom: 12px;
            padding: 8px;
            box-shadow: #fff 2px 2px 10px;
            position: relative;
            transition: all .5s;
            word-wrap: break-word;
        }

        .item:hover {
            background-color: #fff;
            transition: all .5s;
        }

        .item:hover .deleteItem {
            display: block;
        }

        .deleteItem {
            display: none;
            color: black;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div id="root">
        <span class="title">自律抽奖小游戏</span>
        <button class="btnC" onclick='btn()'>开始抽奖</button>
        <button class="btnC" onclick="defaultList()">使用默挑战抽奖</button>

        <div class="task">
            <span style="width: 70px;">输入挑战:</span>
            <textarea style="width: 400px;height: 120px;" placeholder="请输入您要挑战的事情，批量请用逗号分隔"></textarea>
            <button class="submitBtn" onclick="submitBtn()">提交</button>
        </div>
        <br>
        <div>挑战任务列表:</div>
        <div class="todolist"></div>
        <br>
        <div class="marksBox ">
            <a class="exit" onclick="editFn2()" href="javascript:void(0)">x 拒绝挑战（不建议拒绝）</a>
            <a class="ok" onclick="ok()" href="javascript:void(0)">√ 接受挑战</a>
            <div class="marks">
                恭喜你哦，自律的宝宝，你获得了
                <br>
                “<span class="contentText"></span>”
            </div>
        </div>

        <div class="marksBox2 ">
            <a class="exit" onclick="editFn()" href="javascript:void(0)">x 拒绝挑战（不建议拒绝）</a>
            <a class="ok" onclick="ok()" href="javascript:void(0)">√ 接受挑战</a>
            <div class="marks">
                好宝宝，你真的要放弃挑战么？(最后提醒你哦好宝～)
            </div>
        </div>
    </div>
</body>
<script>
    let count = 0;

    const todolist = document.getElementsByClassName('todolist')[0]
    const marksBox = document.getElementsByClassName('marksBox')[0]
    const marksBox2 = document.getElementsByClassName('marksBox2')[0]
    const btn = () => {
        var min = 1;
        var max = todolist.children.length - 1;
        var randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
        if (todolist.children.length - 1 < 2) return window.alert('至少要三条才可以抽奖哦');
        document.getElementsByClassName('contentText')[0].innerHTML = todolist.children[randomNum].innerText
        marksBox.classList.add('marksAction')
    }

    todolist.addEventListener('click', (e) => {
        if (e.target.classList.contains('item')) {
            e.target.remove();
        }
    })

    const ok = () => {
        window.alert('加油宝宝，你一定可以挑战成功的 ♥️')
        marksBox.classList.remove('marksAction')
        marksBox2.classList.remove('marksAction')
    }

    const editFn = () => {
        const text = prompt('你个小菜狗，挑战都不敢，自己在输入框里输入 ‘对不起，我是菜狗‘ 本程序允许你复制粘贴,就可以走了 (^_^)v')
        if (text === '对不起，我是菜狗') {
            marksBox.classList.remove('marksAction')
            marksBox2.classList.remove('marksAction')
        }
    }
    const editFn2 = () => {
        marksBox.classList.remove('marksAction')
        marksBox2.classList.add('marksAction')
    }

    const defaultList = () => {
        createList([
            '吃二两奥利给',
            '倒立洗头',
            '收一个徒弟',
            '学习一个新技能',
            '养一只宠物'
        ])
    }

    const createList = (list = []) => {
        if (list.length === 0) {
            return window.alert('输入不能为空哦');
        }
        list.forEach((item, index) => {
            const itemElement = document.createElement('div');
            itemElement.classList.add('item');
            itemElement.innerHTML = `<span>编号${count}：${item}</span> <span class='deleteItem'>删除</span>`;
            count++;
            todolist.appendChild(itemElement);
        });
    }


    const submitBtn = () => {
        const value = document.getElementsByTagName('textarea')[0].value

        if (value.indexOf(',') !== -1) {
            createList(value.split(',').filter(item => item !== ""))
        } else if (value.indexOf('，') !== -1) {
            createList(value.split('，').filter(item => item !== ""))
        } else if (value.length !== 0) {
            createList([value])
        } else {
            createList()
        }
    }
</script>

</html>